<template>
	<view class="content">
		<!-- 头部 -->
		<view class="nav" :style="{top:navHeight*2+ 5 + 'rpx'}">
			<view class="nav-left">
				<u-icon name="close" color="#808080" size="28" @click="colse"></u-icon>
			</view>
			<view class="nav-right">
				<text>账号密码登录</text>
			</view>
		</view>
		
		<!-- 登录 -->
		<view class="login">
			<view class="login-title">验证码登录</view>
			<view class="login-input">
				<view class="login-input-phone">
					<u--input v-model="phoneCode.mobile" placeholder="请输入手机号" border="bottom"></u--input>
				</view>
				<view class="login-input-code">
					<u--input v-model="code" placeholder="图形验证码" border="bottom"></u--input>
					<image :src="img" mode="aspectFit"></image>
				</view>
				<view class="login-input-phone">
					<u--input v-model="loginObj.smsCode" placeholder="手机验证码" border="bottom" ></u--input>
					<text @click="getPhoneCode">{{cout.startText}}</text>
				</view>
			</view>
			
			
			<view class="login-issue">
				<text>登录遇到问题?</text>
			</view>
			
			<view class="login-bth" @click="goLogin">
			
				<text>登录</text>
			</view>
		</view>
		
		<!-- 登录方式 -->
		<view class="login-type">
			<view class="login-type-list">
				<view class="login-type-list-img"  @click="goSleep">
					<image src="../../static/imgs/login/sl.png" mode="aspectFit"></image>
				</view>
				<view class="login-type-list-text">
					<text>刷脸登录</text>
				</view>
			</view>
			<view class="login-type-list">
				<view class="login-type-list-img" @click="goOneClickLogin">					<image src="../../static/imgs/login/wb.png" mode="aspectFit"></image>				</view>				<view class="login-type-list-text">					<text>一键登录</text>				</view>
			</view>
			<view class="login-type-list">
				<view class="login-type-list-img">					<image src="../../static/imgs/login/wxpng.png" mode="aspectFit"></image>				</view>				<view class="login-type-list-text">					<text>微信登录</text>				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getCode,getPhoneCode} from '../../api/user.js'
	export default {
		data() {
			return {
				img:'',
				navHeight:null,
				//图形验证码
				code:'',
				//手机验证码接口参数
				phoneCode:{
					//图形验证码
					imgCode:'',
					//图形验证码key
					imgKey:'',
					//接收验证码手机
					mobile:'',
					type:'1'
				},
				loginObj:{
					extra: {},
					imgCode: "",
					imgKey: "",
					mobile: "",
					smsCode: ""
				},
				//倒计时
				cout:{
					//开始文本内容及页面展示内容
					startText:'点击获取验证码',
					//结束文本内容
					endText:'请重新获取',
					//开始
					start:5,
					//结束
					end:0,
					//计时器标识
					timer:null,
				},
				//手机正则
				phoneRegular:/^1[3456789]\d{9}$/,
				//验证码正则:
				codeRegular:/^.{4}$/,
			}
		},
		// //用计算属性获取 phoneCode.mobile的值
		// computed:{
		// 	userInfo(){
		// 		return this.$store.state.user.userInfo
		// 	}
		// },
		
		watch:{
			'phoneCode.mobile' : {
				deep:true,
				handler(newValue){
					this.loginObj.mobile = newValue
				}
			}
		},
		methods: {
			// 获取图形验证码
			async getImgCode(){
				let data = await getCode()
				console.log(data)
				this.img = data.data.base64
			},
			//跳转扫脸页面
			goSleep(){
				uni.navigateTo({
					url:'/pages/face/face'
				})
			},
			//跳转一键登录
			goOneClickLogin(){
				uni.navigateTo({
					url:'/pages/OneClickLogin/OneClickLogin'
				})
			},
			
			//正则验证判断手机和验证码输入是否合法
			isVerify(){
				//判断手机号是否合法
				if(!(this.phoneRegular.test(this.phoneCode.mobile))){
					this.$refs.uToast.show({
						message	: '手机号不合法,请重新输入',
						type: 'error',
						duration:2000
				})
					return false
				}
				
				// //判断图形验证码是否合法
				if(!(this.codeRegular.test(this.code))){
					this.$refs.uToast.show({
						message	: '验证码不合法请重新输入',
						type: 'error',
						duration:2000
					})
					return false
				}
				
				return true
			},
			
			//获取手机验证码
			async getPhoneCode(){
			  //校验是否合法
			  if(this.isVerify()){
				  this.$refs.uToast.show({
					  message:'获取成功',
					  type:'success'
				  })
				  uni.showLoading({
				  	title:'加载中...',
					mask:true
				  })
				  //调用接口
				  const res = await getPhoneCode(this.phoneCode)
				  this.cout.timer =	setInterval(()=>{  
				  // 将开始文本转为倒计时
				  this.cout.startText = this.cout.start;
				  //倒计时--
				  this.cout.start--
				  //当等于零的时候
				  if(this.cout.start < this.cout.end){
				  //将一切复位
				  this.cout.start = 5
				  //将定时器清楚
				  clearInterval(this.cout.timer)
				  //把开始文本转为结束文本
				  this.cout.startText = this.cout.endText
			         }
	              },1000)
			   }
			},
		
			//登录
		    async goLogin(){
				// 判断手机号以及验证码是否合法
				if(this.isVerify()){
					uni.showLoading({
						title:'加载中...',
						mask:true
					})
					//用vuex调用登录接口存储个人数据
					this.$store.dispatch('user/getUserInfo',this.loginObj)
				}
				
			},
			
			//点击关闭按钮
			colse(){
				uni.reLaunch({
					url:'/pages/my/my',
					animationType:'pop-in',
					animationDuration:1000
				})
			}
		},
		//组件销毁（就是离开后）
		destroyed() {
			//把定时器清除 防止污染其他页面
			clearInterval(this.cout.timer)
		},
		onShow() {
			this.getImgCode()
			//获取导航栏的高度
			let h = uni.getSystemInfoSync().statusBarHeight 
			this.navHeight = h
		}
	}
</script>

<style scoped lang="scss">
.content{
	padding: 40rpx 40rpx 0rpx 60rpx;
	box-sizing: border-box;
	
	
	.nav{
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.nav-right{
			font-size: 32rpx;
			color: #404040;
			font-weight: 600;
			margin-left: 250rpx;
		}
	}
	
	.login{
		margin-top: 180rpx;
		
		.login-title{
			font-size: 56rpx;
			color: #404040;
			margin-bottom: 120rpx;
			font-weight: 600;
		}
		
		.login-input{
			display: flex;
			flex-direction: column;
			gap: 40rpx;
			
			.login-input-code{
				position: relative;
				
				image{
					position: absolute;
					width: 220rpx;
					height: 80rpx;
					right: 0rpx;
					top:-20rpx;
				}
			}
			
			
			.login-input-phone{
				position: relative;
				
				text{
					
				}
			}
		}
		
		
		
		.login-issue{
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #989691;
			font-weight: 600;
		}
		
		.login-bth{
			margin-top: 100rpx;
			
			text{
				display: inline-block;
				height: 100rpx;
				background-image: url('../../static/imgs/myimgs/myNav.png');
				width: 100%;
				text-align: center;
				line-height: 100rpx;
				font-size: 36rpx;
				color: #fff;
				border-radius: 10rpx;
			}
		}
	}

	.login-type{
		margin-top: 400rpx;
		display: flex;
		justify-content: space-between;
		.login-type-list{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.login-type-list-img{
				
				image{
					width: 86rpx;
					height: 86rpx;
				}
			}
			
			.login-type-list-text{
				text{
					display: inline-block;
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
